<template>
  <view class="icon-showcase">
    <view class="header">
      <text class="title">图标展示</text>
    </view>
    <view class="icon-list">
      <view class="icon-item" v-for="(icon, index) in iconList" :key="index">
        <view class="icon-wrapper">
          <i :class="['iconfont', icon.className]"></i>
        </view>
        <text class="icon-name">{{ icon.className }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 从font.css文件中提取的所有图标类名
      iconList: [
        { className: 'iconbtn_delete' },
        { className: 'iconbtn_reset_gray' },
        { className: 'iconweixin' },
        { className: 'icon_history' },
        { className: 'icon_hot1' },
        { className: 'iconbtn_bottom_call' },
        { className: 'iconfanhui' },
        { className: 'iconbtn_more' },
        { className: 'iconbtn_msg' },
        { className: 'iconbtn_voice' },
        { className: 'icon_arrowup' },
        { className: 'icon_search' },
        { className: 'icon_loading' },
        { className: 'icon_arrowdown' },
        { className: 'iconbtn_close_gray' },
        { className: 'iconbtn_arrowr' },
        { className: 'iconbtn_comment' },
        { className: 'iconbtn_concern' },
        { className: 'iconbtn_zan' },
        { className: 'icon_arrowdown1' },
        { className: 'iconbtn_sahre' },
        { className: 'icon_selected' },
        { className: 'icon_quan' },
        { className: 'icon_quan1' },
        { className: 'iconimg_shop_default' },
        { className: 'icon_slider_arrowd1' },
        { className: 'iconbtn_bottom_location' },
        { className: 'iconbtn_bottom_share' },
        { className: 'iconbtn_call_solid' },
        { className: 'iconbtn_bottom_collect' },
        { className: 'iconbtn_collect' },
        { className: 'iconbtn_bottom_shop' },
        { className: 'icon_location1' },
        { className: 'icon_time' },
        { className: 'icon_call' },
        { className: 'iconbtn_collected' },
        { className: 'iconbtn_weixin' },
        { className: 'iconbtn_save' },
        { className: 'iconbtn_close_black' },
        { className: 'iconbtn_last' },
        { className: 'iconbtn_subtract' },
        { className: 'iconbtn_add' },
        { className: 'iconbtn_zan1' },
        { className: 'iconbtn_huan' },
        { className: 'icon_select' },
        { className: 'icon_selected1' },
        { className: 'iconbtn_question' },
        { className: 'iconbtn_card_record' },
        { className: 'iconbtn_star_c' },
        { className: 'icon_order' },
        { className: 'icon_order1' },
        { className: 'icon_order2' },
        { className: 'icon_order3' },
        { className: 'icon_order4' },
        { className: 'icon_order5' },
        { className: 'iconbtn_star_d' },
        { className: 'icon_order6' },
        { className: 'icon_order7' },
        { className: 'icon_smile' },
        { className: 'iconlabel_consumption' },
        { className: 'iconlabel_expired' },
        { className: 'iconbtn_card_ma1' },
        { className: 'icon_cardbag' },
        { className: 'icon_notice' },
        { className: 'icon_phone' },
        { className: 'icon_balance_des' },
        { className: 'icon_weixin' },
        { className: 'iconbtn_edit' },
        { className: 'icon_integral_detail' },
        { className: 'icon_integral_record' },
        { className: 'iconbtn_qiehuan' },
        { className: 'iconlabel_evaluation' },
        { className: 'iconbtn_upload' },
        { className: 'icon_order8' },
        { className: 'icon_plus' },
        { className: 'icon_plus_poster' },
        { className: 'icon_diamond' },
        { className: 'icon_plus_detail' },
        { className: 'icon_plus_tool' },
        { className: 'icon_plus_tool1' },
        { className: 'icon_plus_rank' },
        { className: 'icon_plus_tool2' },
        { className: 'icon_plus1' },
        { className: 'icon_plus_tool3' },
        { className: 'icon_user_avatar' },
        { className: 'icon_user_avatar' }
      ]
    }
  },
  onLoad() {
    // 页面加载时的逻辑
    console.log('图标展示页面加载完成')
  }
}
</script>

<style scoped>
.icon-showcase {
  padding: 20rpx;
  box-sizing: border-box;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  text-align: center;
  padding: 30rpx 0;
  background-color: #fff;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.icon-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.icon-item {
  width: 25%;
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #fff;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.icon-wrapper {
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10rpx;
}

.icon-wrapper i {
  font-size: 60rpx;
  color: #07c160;
}

.icon-name {
  font-size: 24rpx;
  color: #666;
  text-align: center;
  word-break: break-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>